<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        html,body{width: 100%;
            height: 100%;
            font: 400 14px/1.5 Microsoft YaHei, sans-serif;}

        #dockContainer{overflow: hidden;width:100%;height:100%;
           }
        #dingbu{width:100%;height:100%;transition: all 1s ease;}
        li{list-style-type:none;}
        .count{float:left;}
        #dockWrapper{width:100%;height:100%;background: url(homeBGD.jpg) center no-repeat ;background-size:cover;
            position: relative;
            }
        #dockWrapper #handle{width:100%;height:250px;margin-top:100px;}
        #dockWrapper #handle .portrait{width:150px;height:150px;margin:0 auto;}
        #dockWrapper #handle .portrait img{border-radius:50%;}
        #dockWrapper #handle .introduce{margin:20px auto;width:300px;height:50px;text-align:center;color:white;font-size:30px;
        text-shadow:1px 1px black;}
        #dockWrapper ul{width:100%;height:200px;margin-top:100px;}
        #dockWrapper ul .icons{float:left;margin-left:10%;height:100px;width:100px;box-shadow:10px 10px 50px #484042;}
        #dockWrapper ul .icons1{animation:x-spin 3s infinite linear;}
       @keyframes x-spin
        {
            0% {
                transform:rotate(0deg);
            }
            50%{
                transform:rotate(180deg);
            }
            100%{
                transform:rotate(0deg);
            }
        }
        #dockWrapper ul .icons2{animation:x-spin2 3s infinite linear;position: relative;}
        @keyframes x-spin2
        {
            0%{
                top:0;
            }
            50%{
                top:-50px;
            }
            100%{
                top:0px;
            }
        }
        #dockWrapper .icons3{animation:x-spin3 3s infinite linear;position: relative;}
        @keyframes x-spin3
        {
            0%{
                top:0;
                transform:rotate(0deg);
            }
            50%{
                top:50px;
                transform:rotate(-180deg);
            }
            100%{
                top:0px;
                transform:rotate(0deg);
            }
        }
        #dockWrapper .icons4{animation:x-spin4 3s infinite linear;position: relative;}
        @keyframes x-spin4
        {
            0%{

                transform:rotate(0deg);
            }
            50%{

                transform:rotate(-180deg);
            }
            100%{

                transform:rotate(-360deg);
            }
        }
        #dockWrapper ul .icons5{animation:x-spin5 5s infinite linear;position: relative;}
        @keyframes x-spin5
        {
            0%{

                top:0;
            }
            20%{

                top:-100px;
            }
            30%{

                top:0px;
            }
            40%{

                top:-40px;
            }
            50%{

                top:0px;
            }
            60%{

                top:-30px;
            }
            70%{

                top:0px;
            }
            80%{

                top:-20px;
            }
            90%{

                top:0px;
            }
            100%{

                top:0px;
            }
        }
         .navigation{height:100px;position: fixed;bottom: 0;left:50%;margin-left:-280px;padding:10px 40px 0 0;
            z-index:100;overflow:hidden;}
         .navigation li{float:left;width:60px; height:50px;  position: relative;
                                    transition:0.3s linear;display:block;margin:0 20px 0 20px;transform-origin: center bottom;}
         .navigation li a{display:block;height:50px;transition:0.3s linear;}
         .navigation li:hover {z-index:100;margin-left:30px;margin-right:30px;}
         .navigation li:hover  a{transform:scale(1.5);transform-origin:center bottom;}
        .navigation li:before{content:attr(alt);position: relative;  top: -10px;left:10px;color:white;}
        .navigation li a img:hover{cursor:pointer;}
         .lefts{width:300px;height:500px;position: fixed;top:100px;border-radius:0 10px 10px 0;z-index:100;
                            background:rgba(0,0,0,0.3);left:-300px;display:block;transition:left 0.5s ease-in;}
         .lefts #jiantou{width:50px;height:80px;background:rgba(0,0,0,0.3);position:absolute;right:-50px;top:190px;
              text-indent:15px;  border-radius:0 10px 10px 0;cursor:pointer;line-height:80px;font-size:35px;color:white;}

         .lefts  ul{margin-top:80px;}
         .lefts  ul li{border-bottom:1px dashed white;width:70%;margin:0 15%;text-index:5em;height:50px;line-height:50px;
                                    color:white;}
         .lefts  ul li.information2{height:100px;}

        #dockWrapper2{width:100%;height:100%;position:relative;
                     background:-webkit-gradient(linear,left top,left bottom,from(darkblue),to(deepskyblue));
                        background:linear-gradient(to bottom,darkblue,deepskyblue);
                        color:white;
                         }
        #dockWrapper2 .skillBox{width:800px;height:400px;margin: 10% auto;opacity:0;
            transition:opacity 1.5s 0.5s linear;}

        #dockWrapper2 .skillBox .skillZuo{width:80px;height:100%;font-size:50px;
                            text-align:center;float:left;}
        #dockWrapper2 .skillBox .skillYou{width:720px;float:left;}
        #dockWrapper2 .skillBox .skillYou ul li{width:100%;height:35px;background:rgba(255,255,255,0.2);
                                                margin-bottom:15px;line-height:35px;border-radius:20px;

                                                }
        #dockWrapper2 .skillBox .skillYou ul li .skillName{width:100px;height:50px;text-align:right;
                                    float:left;}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor{height:21px;line-height:21px;width:0px;
                                float:left;margin:7px 0 0 10px;border-radius:20px;text-align:center;
                                transition:width 1.5s 0.5s linear;}

        #dockWrapper2 .skillBox .skillYou ul li .skillColor1{background:blueviolet;}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor2{background:yellowgreen;}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor3{background:orangered}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor4{background:darkseagreen}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor5{background:lightslategray;}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor6{background:mediumvioletred}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor7{background:greenyellow}
        #dockWrapper2 .skillBox .skillYou ul li .skillColor8{background:dodgerblue;}

        #dockWrapper3{width:100%;height:100%;position:relative;
                    background:-webkit-gradient(linear,left top ,left bottom,color-stop(0%,rgba(5,20,23,1)), color-stop(22%,rgba(28,58,63,1)),
                    color-stop(53%,rgba(64,134,142,1)), color-stop(100%,rgba(138,249,249,1))
                    );background:linear-gradient(to bottom, rgba(5,20,23,1) 0%,rgba(28,58,63,1) 22%,rgba(64,134,142,1) 53%,rgba(138,249,249,1) 100%)}

        #dockWrapper3 .project{background:rgba(255,255,255,1);width:800px;height:300px;margin:80px auto;border-radius:20px;
                                box-shadow:5px 5px 10px black;}
        #dockWrapper3 .project .project_hander{width:90%;height:50px;margin:20px 0 0 10%;float:left;font-size:30px;color:#FF00AF;}
        #dockWrapper3 .project .project_hander span{background:red;color:white;text-align:center;transform:skew(-48deg,36deg);
            position:relative;right: -594px; top: -55px;display:block;width:150px;}
        #dockWrapper3 .project .zhize{width:90%;margin:20px 5% 0 5%;float:left;font-size:16px;}
        #dockWrapper3 .project .zhize span{color:#999;line-height:40px;}

        #dockWrapper4{width:100%;height:100%;position:relative;background:-webkit-gradient(linear,left top ,left bottom,
        color-stop(0%,#87D2D6),color-stop(100%,yellowgreen));background:linear-gradient(to bottom,#87D2D6,yellowgreen)}
        #dockWrapper4 .bottoms{position:absolute;bottom:0;width:90%;height:50px;background:#999;font-size:20px;padding-left:10%;
                            line-height:50px;background:black;color:white;letter-spacing:10px;}
        #dockWrapper4  .lastBox{width:800px;height:500px;background:rgba(211,211,211,0.3);border-radius:20px;margin:100px auto;}
        #dockWrapper4  .lastBox .jieshao{float:left;width:90%;height:50px;line-height:50px;margin:0 5%;border-bottom:1px solid rgba(0,125,255,1);
                                       color:#FF00BA;font-size:20px; }

        #dockWrapper4  .lastBox ul li{width:80%;margin:0 0 0 8%;float:left;height:30px;line-height:30px;}
        #dockWrapper4  .lastBox .lianxi{float:left;width:100%;text-align:center;height:50px;margin-top:30px;font-size:20px;color:#FF00BA;}
    </style>
    <script type="text/javascript">

        window.onload=function()
        {

            var jiantou= document.getElementById("jiantou");
            var dingbu=document.getElementById("dingbu");
            var heights=0;var pages=0;var fal=true;
            var skillBox=document.getElementById("skillBox");
            var skillBoxLi=skillBox.getElementsByTagName("li");
            var skillBoxLiColors=[457,457,488,427,366,305,305,366];
            var btmNav=document.getElementById("btmNav").getElementsByTagName("img");
            var jiantou=document.getElementById("jiantou");
            var lefts=document.getElementById("lefts");

            function LeftJianTou()
            {
                lefts.offsetLeft==0?(jiantou.style.textIndent="15px",jiantou.innerHTML="》",lefts.style.left="-300px"):(jiantou.style.textIndent="0",jiantou.innerHTML="《",lefts.style.left="0")
            }


            //点击事件-左侧信息栏
            jiantou.onclick=function()
            {

              // jiantou.parentNode.offsetLeft==0?jiantou.parentNode.style.left="-300px":jiantou.parentNode.style.left="0";
                LeftJianTou();
            }

            //底部小猫导航
            for(var i=0;i<btmNav.length;i++)
            {
                btmNav[i].index=i;
                btmNav[i].onclick=function()
                {
                    huanyuan();
                    if(this.index!=4)
                    {
                        pages=this.index;
                        document.body.offsetHeight ? heights = document.body.offsetHeight : heights = document.documentElement.offsetHeight;
                        dingbu.style.transform = "translateY(" + (-pages * heights) + "px)";
                        if(pages==1) {

                            skillBox.style.opacity = "1";
                            skillBox.style.filter = "alpha(opacity=100)";//兼容ie
                            for (var i = 0; i < skillBoxLi.length; i++) {

                                skillBoxLi[i].childNodes[1].style.width = skillBoxLiColors[i] + "px";
                            }
                        }
                    }else
                    {
                        LeftJianTou();
                    }


                }
            }
            //滚动整屏翻页
            var scrollFunc=function(event)
            {


                if(fal) {
                    fal=false;
                    huanyuan();
                    var event = event || window.event;
                    document.body.offsetHeight ? heights = document.body.offsetHeight : heights = document.documentElement.offsetHeight;

                    //非火狐进wheelDelta，火狐进detail
                    if (event.wheelDelta) {
                        if (event.wheelDelta == -120) {
                            pages<3?pages++:pages;
                        }else {
                           pages>0?pages--:pages;
                        }


                    } else if (event.detail) {
                        if (event.detail == 3) {
                            pages<3?pages++:pages;
                        }else {
                            pages>0?pages--:pages;
                        }

                    }
                    dingbu.style.transform = "translateY(" + (-pages * heights) + "px)";

                        if(pages==1) {
                            skillBox.style.opacity = "1";
                            skillBox.style.filter = "alpha(opacity=100)";//兼容ie
                            for (var i = 0; i < skillBoxLi.length; i++) {

                                skillBoxLi[i].childNodes[1].style.width = skillBoxLiColors[i] + "px";
                            }
                        }

                    var play=setTimeout(function(){fal=true;},1000);//防止滚动过快
                }

            }

            function huanyuan()
            {
                for(var i=0;i<skillBoxLi.length;i++)
                {

                    skillBoxLi[i].childNodes[1].style.width="0px";
                }
                skillBox.style.opacity="0";
                skillBox.style.filter="alpha(opacity=0)";//兼容ie
            }

            //注册滚动事件-fix
            if(document.addEventListener){
                document.addEventListener('DOMMouseScroll',scrollFunc,false);
            }
            //ie webkit opera
            window.onmousewheel=document.onmousewheel=scrollFunc;

        }
    </script>
</head>
<body>
    <div id="dockContainer">
        <div class="lefts" id="lefts">
            <div id="jiantou" >》</div>
            <ul>
                <li class="information">个人信息:</li>
                <li class="information">生日:1988-12-17</li>
                <li class="information">TEL:15814039607</li>
                <li class="information">Email:286376184@qq.com</li>
                <li class="information information2">住址:武汉市武昌区光谷</li>
            </ul>
        </div>
        <ul class="navigation" id="btmNav">
            <li class="lis" alt="个人首页"><a  ><img src="icon_1.png"  width="80" height="80" /></a></li>
            <li class="lis" alt="专业技能"><a ><img src="icon_3.png"   width="80" height="80" /></a></li>
            <li class="lis" alt="项目经验"><a  ><img src="icon_4.png" width="80" height="80" /></a></li>
            <li class="lis" alt="个人简介"><a  ><img src="icon_5.png"  width="80" height="80" /></a></li>
            <li class="lis" alt="联系方式"><a  ><img src="icon_6.png"  width="80" height="80" /></a></li>
        </ul>
    <div id="dingbu">
        <div id="dockWrapper" class="count">
            <div id="handle">
                <div class="portrait"><img src="me.jpg" width="150" height="150"></div>
                <div class="introduce">兰飞的前端个人简历</div>

            </div>
            <ul>
                <li class="icons icons1"><img src="icon-html.jpg" width="100" height="100" /></li>
                <li class="icons icons2"><img src="icon-css.jpg" width="100" height="100" /></li>
                <li class="icons icons3"><img src="icon-js.jpg" width="100" height="100" /></li>
                <li class="icons icons4"><img src="icon-jquery.jpg" width="100" height="100" /></li>
                <li class="icons icons5"><img src="icon-java.jpg" width="100" height="100" /></li>
            </ul>

        </div>
        <div id="dockWrapper2" class="count">
            <div class="skillBox" id="skillBox">
                <div class="skillZuo">专业技能</div>
                <div class="skillYou">
                    <ul>
                        <li><div class="skillName">HTML5:</div><div class="skillColor skillColor1">75%</div></li>
                        <li><div class="skillName">CSS3:</div><div class="skillColor skillColor2">75%</div></li>
                        <li><div class="skillName">Javascript:</div><div class="skillColor skillColor3">80%</div></li>
                        <li><div class="skillName">Ajax:</div><div class="skillColor skillColor4">70%</div></li>
                        <li><div class="skillName">Jquery:</div><div class="skillColor skillColor5">60%</div></li>
                        <li><div class="skillName">Java:</div><div class="skillColor skillColor6">50%</div></li>
                        <li><div class="skillName">Oracle:</div><div class="skillColor skillColor7">50%</div></li>
                        <li><div class="skillName">SQLServer:</div><div class="skillColor skillColor8">60%</div></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="dockWrapper3" class="count">
            <div class="project">
                <div class="project_hander">esales_一站式系统<span>项目经验</span></div>
                <div class="zhize"><span>项目描述：</span>项目主要职责是集成渠道各流程于一体，以往要使用多种系统才可以走完的审批流程，在esales可以一站式走完。</div>
                <div class="zhize"><span>项目职责：</span>负责页面制作，权限设计，调用后台数据实现异步显示，完成的功能有，导航，留言功能，各种数据战士，及各种特效。个人负责模块都是手写html css js</div>
            </div>
            <div class="project">
                <div class="project_hander">echannel_渠道<span>项目经验</span></div>
                <div class="zhize"><span>项目描述：</span>负责华为内部的各级经销商审批系统，及华为主管对各业务的使用</div>
                <div class="zhize"><span>项目职责：</span>设计页面，处理逻辑，将业务的需求高效，安全，简洁的处理好，兼容各种浏览器。个人负责模块都是手写html css js</div>
            </div>
        </div>
        <div id="dockWrapper4" class="count">
            <div class="lastBox">
                <div class="jieshao">兴趣爱好</div>
                <ul>
                    <li>喜欢爬山，深圳最欢梧桐山，但距离实在太远，现在多爬的羊台山。</li>
                    <li>喜欢一些比较炫酷的技术，最近在学习node.js</li>
                    <li>喜欢看美剧，对国产面瘫剧实在爱不起来。</li>
                    <li>喜欢旅游，南边很多地方都去过了，下次想去北边玩玩.ps:穷，国外玩不起。</li>
                    <li>我的最大的爱好是......赚很多很多钱!!!</li>
                </ul>
                <div class="jieshao">个人简介</div>
                    <ul>
                        <li>善于在生活中学习，每当看到设计精美的网页，总会细细品味、学习并任性的收藏</li>
                        <li>追求代码的简洁易读,善于学习并解决问题</li>
                        <li>良好的沟通表达能力、执行力、责任感及分析判断能力</li>
                        <li>能够适应一定强度的工作</li>
                        <li>希望的团队是有朝气有活力，能够实现自我价值。</li>
                    </ul>
                <div class="lianxi">联系方式可点击屏幕左侧按钮，或点击最后一个小猫咪.</div>

            </div>
            <div class="bottoms">到达底部啦!</div>
        </div>
    </div>
    </div>



</body>
</html>
<!--
<body style="background-image:url(图片位置);background-position:center;
width:100%;height:100%;background-repeat:repeat-X;background-size:cover;background-attachment:fixed">-->